<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="视频网站名称">
        <el-select
          v-model="table.query.site"
          placeholder="视频网站名称"
          style="max-width: 150px;"
          @change="changeWebsite"
        >
          <el-option
            key="haokan"
            label="好看"
            value="haokan"
          />
          <el-option
            key="fun"
            label="风行"
            value="fun"
          />
          <el-option
            key="douyin"
            label="抖音"
            value="douyin"
          />
          <el-option
            key="kuaishou"
            label="快手"
            value="kuaishou"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="multipleSelection.length <= 0"
          @click="onClickBatch"
        >
          批量发布
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="index"
        label="序号"
        width="200"
      >
        <template #default="scope">
          {{ (scope.$index + 1) + ((table.query.page - 1) * table.query.limit) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="site"
        label="视频网站"
        width="200"
      >
        <template #default="scope">
          {{ getSiteName(scope.row.site ) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="videoName"
        label="名称"
        min-width="160"
      />
      <el-table-column
        prop="videoUrl"
        label="地址"
        min-width="200"
      />
      <el-table-column
        prop="videoDuration"
        label="视频时长"
        width="200"
      />
      <el-table-column
        prop="videoLength"
        label="视频大小"
        width="200"
      />
      <el-table-column
        prop="videoAddr"
        label="视频采集地址"
        width="200"
      />
      <el-table-column
        prop="time"
        label="采集时间"
        width="200"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="220"
      >
        <template
          #default="scope"
        >
          <!--          <el-button-->
          <!--            link-->
          <!--            type="primary"-->
          <!--            @click="onClickDelete(scope.row)"-->
          <!--          >-->
          <!--            删除-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--            link-->
          <!--            type="primary"-->
          <!--            @click="onClickModify(scope.row)"-->
          <!--          >-->
          <!--            修改-->
          <!--          </el-button>-->
          <el-button
            link
            type="primary"
            @click="onClickDistribution(scope.row)"
          >
            策略下发
          </el-button>
          <el-button
            link
            type="primary"
            @click="onClickOrg(scope.row)"
          >
            原视频
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :default-page-size="table.query.limit"
      @current-change="handleChangePage"
      @size-change="handleChangeLimit"
    />
  </el-main>

  <el-dialog
    v-model="form.visible"
    :title="form.name"
    :close-on-click-modal="false"
    destroy-on-close
    close-on-press-escape
    width="400"
    center
  >
    <el-form
      ref="ruleFormRef"
      label-position="left"
      :model="form"
      label-width="120px"
    >
      <el-form-item
        label="视频网站"
      >
        <el-input
          v-model="form.site"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="名称"
      >
        <el-input
          v-model="form.videoName"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="地址"
      >
        <el-input
          v-model="form.videoUrl"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频时长"
      >
        <el-input
          v-model="form.time"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频大小"
      >
        <el-input
          v-model="form.videoLength"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="视频采集地址"
      >
        <el-input
          v-model="form.videoAddr"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="采集时间"
      >
        <el-input
          v-model="form.videoDuration"
          style="width: 190px;"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="onSubmit"
        >确定</el-button>
        <el-button @click="form.visible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'

import router from '@/router/index.js'
import { batchVisit, deleteVideo, listVideo, setParam } from '@/apis/netflow.js'
import { ElMessage } from 'element-plus'
import service from '@/utils/request.js'

const ruleFormRef = ref(null) // 登录表单ref

const form = reactive({
  visible: false,
  site: '',
  id: 0,
  name: '',
  url: '',
  time: '',
  length: '',
  videoAddr: '',
  videoDuration: ''
})
const table = ref({
  total: 0,
  query: {
    site: 'haokan',
    limit: 20,
    page: 1,
    order: null,
    email: null
  },
  data: [
    {
      id: 1,
      site: '风行',
      videoName: '百度',
      videoUrl: 'https:/www.baidu.com',
      videoDuration: 10000,
      videoLength: 999,
      videoAddr: '???',
      time: '2000-00-00'
    }
  ]
})

const getListVideo = () => {
  const params = { site: table.value.query.site, limit: table.value.query.limit, page: table.value.query.page }
  listVideo(params).then((result) => {
    console.log('result', result)
    table.value.data = result.list
    table.value.total = result.total
  })
}

getListVideo()

const changeWebsite = (value) => {
  table.value.query.site = value
  table.value.query.page = 1
  getListVideo()
}

const onClickDelete = (row) => {
  console.log('row', row)
  const params = { id: row.id }
  deleteVideo(params).then(result => {
    if (result !== 0) {
      ElMessage.success('删除成功! ')
      getListVideo()
    } else {
      ElMessage.error('删除失败! ')
    }
  })
}
const onClickModify = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
  form.visible = true
  form.site = item.site
  form.id = item.id
  form.videoName = item.videoName
  form.videoUrl = item.videoUrl
  form.time = item.time
  form.videoLength = item.videoLength
  form.videoAddr = item.videoAddr
  form.videoDuration = item.videoDuration
}
const onClickDetail = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
}
const onClickDistribution = (row) => {
  const id = row.id
  const item = table.value.data.find(item => item.id === id)
  router.push({
    name: 'managerDistribution',
    query: {
      site: item.site,
      name: item.videoName,
      url: item.videoUrl
    }
  })
}
const onClickOrg = (row) => {
  window.open(row.videoUrl, '_blank')
}

const onSubmit = () => {
  ruleFormRef.value.validate((validate) => {
    if (validate) { // 判断表单是否验证通过。
      const data = {
        ip: form.ip,
        device: form.device,
        os: form.os,
        browser: form.browser,
        version: form.browserVersion
      }
      setParam(data).then((result) => {
        if (result.data === 0) {
          form.visible = false
          ElMessage.success('修改成功！')
          getListVideo()
        } else {
          form.visible = false
          ElMessage.error('修改失败！')
        }
      })
    } else {
      ElMessage.error('请检查数据！')
    }
  })
}

const handleChangePage = (value) => {
  table.value.query.page = value
  getListVideo()
}
const handleChangeLimit = (value) => {
  table.value.query.limit = value
  getListVideo()
}

const getSiteName = (site) => {
  switch (site) {
    case 'haokan':
      return '好看'
    case 'fun':
      return '风行'
    case 'douyin':
      return '抖音'
    case 'kuaishou':
      return '快手'
  }
}

const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  console.log('val', val)
  multipleSelection.value = val
}

const onClickBatch = () => {
  const list = []
  for (let i = 0; i < multipleSelection.value.length; i++) {
    const data = {
      site: multipleSelection.value[i].site,
      videoName: multipleSelection.value[i].videoName,
      videoUrl: multipleSelection.value[i].videoUrl,
      startTime: formatDate(new Date()),
      endTime: formatDate(new Date()),
      proxyServer: '',
      device: '',
      osName: '',
      osVersion: '',
      browserName: '',
      browserVersion: ''
    }
    list.push(data)
  }
  const data = {
    videoList: list
  }
  batchVisit(data).then((result) => {
    if (result === 0) {
      ElMessage.success('下发成功！')
    } else {
      ElMessage.error('下发失败！')
    }
  })
}
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
</script>

<style lang="scss">
a {
  color: blue;
  cursor: pointer;
  //text-decoration: none; /* 移除默认的下划线效果 */
  &:hover, &:active {
    text-decoration: underline;
    color: red; // 可选：在悬浮时改变文本颜色
  }
}

</style>
